import React, { Component } from 'react'
import './index.less'

const daji = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572869787163&di=3f12c557c15d90cc9a7e40401703837b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D5bfde59e4a90f60304b09c4f0913b370%2Fc0d8f358ccbf6c8151754547bc3eb13532fa40bd.jpg'

const BMap = window.BMap
export default class Home extends Component {
  componentDidMount() {
    // 实例化地图对象 
    var map = new BMap.Map("container");
    console.log(map)
    // 设置位置的经纬度  以天安门为例  
    // var point = new BMap.Point(116.404, 39.915);
    // 绘制地图 并设置缩放的级别 
    // map.centerAndZoom(point, 15);

    // 创建地址解析器实例     
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野    
    myGeo.getPoint("岳麓区麓谷企业广场A2栋", function (point) {
      if (point) {
        map.centerAndZoom(point, 16);
        // 设置红点 
        // map.addOverlay(new BMap.Marker(point));
        
        //创建小狐狸
        // var pt = new BMap.Point(116.417, 39.909);
        var myIcon = new BMap.Icon(daji, new BMap.Size(300, 157));
        var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        map.addOverlay(marker2);              // 将标注添加到地图中


        // 设置文字覆盖物 
        var opts = {
          position: point,    // 指定文本标注所在的地理位置
          offset: new BMap.Size(30, -30)    //设置文本偏移量
        }
        var label = new BMap.Label("来和妲己一起玩耍鸭", opts);  // 创建文本标注对象
        label.setStyle({
          color: "red",
          fontSize: "12px",
          height: "20px",
          lineHeight: "20px",
          fontFamily: "微软雅黑"
        });
        map.addOverlay(label);
      }
    },
      "长沙市");
  }
  render() {
    return (
      <div className="home">
        <div id="container" className="container"></div>
      </div>
    )
  }
}
